﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>指示备注 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#popover" class="nav-link font-weight-bold"><span>指示备注(Popover)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>概述</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#positioning" class="nav-link"><span>定位</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#triggers" class="nav-link"><span>触发器</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#caveats-with-focus-trigger-on-button-elements" class="nav-link"><span>关于&lt;button&gt;元素焦点 触发的注意事项</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dismiss-on-next-click-self-dismissing" class="nav-link"><span>下次单击时关闭（自行关闭）</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#b-popover-component-basic-usage" class="nav-link"><span>&lt;b-popover&gt;组件基本用法</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#component-options-via-props" class="nav-link"><span>通过属性的组件选项</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#variants-and-custom-class" class="nav-link"><span>变量和自定义类</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#programmatically-show-and-hide-popover" class="nav-link"><span>显示和隐藏弹出窗口</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#programmatically-disabling-popover" class="nav-link"><span>以编程方式禁用popover</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#v-b-popover-directive-usage" class="nav-link"><span>v-b-popover 指令用法</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#advanced-b-popover-usage-with-reactive-content" class="nav-link"><span>高级 &lt;b-popover&gt;使用反应性内容</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#global-root-instance-events" class="nav-link"><span>'全局'$ root实例事件</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#hiding-and-showing-popovers-via-root-events" class="nav-link"><span>通过$root events隐藏和显示弹出窗口</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disabling-and-enabling-popovers-via-root-events" class="nav-link"><span>通过$root events禁用和启用弹出窗口</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#listening-to-popover-changes-via-root-events" class="nav-link"><span>通过$ root事件监听弹出窗口更改</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>辅助功能</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#making-popovers-work-for-keyboard-and-assistive-technology-users" class="nav-link">
  <span>
    为键盘和辅助技术用户制作弹出窗口
</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-popover" class="nav-link"><span>&lt;b-popover&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">指示备注</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">指示备注(Popover)</h1>
<p class="bd-lead">
  Popover特性提供了类似工具提示的行为，可以通过 <code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code>组件
  或<a href="../../../bootstrap-vue/docs/directives/popover" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">v-b-popover</code></a>指令轻松地应用到任何交互式元素。
</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>








<nav data-v-811345e6="" class="bd-quick-links mb-3 d-xl-none">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#overview" class=""><span data-v-811345e6="">Overview</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#positioning" class=""><span data-v-811345e6="">Positioning</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#triggers" class=""><span data-v-811345e6="">Triggers</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#caveats-with-focus-trigger-on-button-elements" class=""><span data-v-811345e6="">Caveats with focus trigger on &lt;button&gt; elements</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dismiss-on-next-click-self-dismissing" class=""><span data-v-811345e6="">Dismiss on next click (self-dismissing)</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-popover-component-basic-usage" class=""><span data-v-811345e6="">&lt;b-popover&gt; Component basic usage</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-options-via-props" class=""><span data-v-811345e6="">Component options via props</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#variants-and-custom-class" class=""><span data-v-811345e6="">Variants and custom class</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#programmatically-show-and-hide-popover" class=""><span data-v-811345e6="">Programmatically show and hide popover</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#programmatically-disabling-popover" class=""><span data-v-811345e6="">Programmatically disabling popover</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-b-popover-directive-usage" class=""><span data-v-811345e6="">v-b-popover Directive usage</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#advanced-b-popover-usage-with-reactive-content" class=""><span data-v-811345e6="">Advanced &lt;b-popover&gt; usage with reactive content</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#global-root-instance-events" class=""><span data-v-811345e6="">'Global' $root instance events</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#hiding-and-showing-popovers-via-root-events" class=""><span data-v-811345e6="">Hiding and showing popovers via $root events</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabling-and-enabling-popovers-via-root-events" class=""><span data-v-811345e6="">Disabling and enabling popovers via $root events</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#listening-to-popover-changes-via-root-events" class=""><span data-v-811345e6="">Listening to popover changes via $root events</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#making-popovers-work-for-keyboard-and-assistive-technology-users" class=""><span data-v-811345e6="">Making popovers work for keyboard and assistive technology users</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-popover" class=""><span data-v-811345e6="">&lt;b-popover&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-popover notranslate">
<div class="text-center my-3">
<button title="Popover Title" type="button" class="btn btn-secondary"> Hover Me </button>
<button id="popover-target-1" type="button" class="btn btn-secondary"> Hover Me </button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center my-3"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.top</span>=<span class="hljs-string">"'I am popover directive content!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover Title"</span>&gt;</span>
    Hover Me
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-target-1"</span>&gt;</span>
    Hover Me
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-target-1"</span> <span class="hljs-attr">triggers</span>=<span class="hljs-string">"hover"</span> <span class="hljs-attr">placement</span>=<span class="hljs-string">"top"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:title</span>&gt;</span>Popover Title<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    I am popover <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>component<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span> content!
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">概述<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p>使用popover组件时需要知道的事项：</p>
<ul>
<li>
  Popover依赖于第三方库<a href="https://popper.js.org/" target="_blank" rel="noopener">Popper.js</a>进行定位。
</li>
<li>弹出窗口需要BootstrapVue的自定义s CSS/CSS才能正常工作，也需要变量</li>
<li>
  将 <code translate="no" class="notranslate text-nowrap">container</code>指定为<code translate="no" class="notranslate text-nowrap">null</code>
  （默认值，追加到<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>），以避免在更复杂的组件（如输入组、按钮组等）中出现呈现问题。
  可以使用<code translate="no" class="notranslate text-nowrap">container</code>指定要将呈现的popover附加到的其他元素。
</li>
<li>在隐藏元素上触发弹出按钮将不起作用。</li>
<li>
  必须在包装器元素上触发<code translate="no" class="notranslate text-nowrap">禁用</code>元素的弹出窗口。
</li>
<li>
当从跨越多行的超链接触发时，弹出窗口将居中。在<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>s,
<code translate="no" class="notranslate text-nowrap">&lt;b-link&gt;</code>s和 
<code translate="no" class="notranslate text-nowrap">&lt;router-link&gt;</code>s上<code translate="no" class="notranslate text-nowrap">使用空格：nowrap</code>；以避免此行为。
</li>
</ul>
<p>
  在装入<code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code>之前，目标元素<strong>必须</strong>存在于文档中。如果在装载期间找不到目标元素，则popover将永远不会打开。
  始终将<code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code>组件放在DOM中低于目标元素的位置。
</p>
<h2 id="positioning" class="bv-no-focus-ring"><span class="bd-content-title">定位<a class="anchorjs-link" href="#positioning" aria-labelledby="positioning"></a></span></h2>
<p>
  有12个选项可用于定位： <code translate="no" class="notranslate text-nowrap">top</code>, 
  <code translate="no" class="notranslate text-nowrap">topleft</code>, 
  <code translate="no" class="notranslate text-nowrap">topright</code>,
   <code translate="no" class="notranslate text-nowrap">right</code>,
    <code translate="no" class="notranslate text-nowrap">righttop</code>, 
    <code translate="no" class="notranslate text-nowrap">rightbottom</code>,
     <code translate="no" class="notranslate text-nowrap">bottom</code>, 
     <code translate="no" class="notranslate text-nowrap">bottomleft</code>, 
     <code translate="no" class="notranslate text-nowrap">bottomright</code>, 
     <code translate="no" class="notranslate text-nowrap">left</code>, 
     <code translate="no" class="notranslate text-nowrap">lefttop</code>,和 
     <code translate="no" class="notranslate text-nowrap">leftbottom</code>。定位是相对于触发器元素的。
</p>
<div class="bd-example bd-example-popover-static">
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
<div class="arrow" style="left: calc(50% - 8px)"></div>
<h3 class="popover-header">Popover top</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
<div class="arrow" style="right: 0px"></div>
<h3 class="popover-header">Popover topleft</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
<div class="arrow" style="left: 0px"></div>
<h3 class="popover-header">Popover topright</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
<div class="arrow" style="top: calc(50% - 4px)"></div>
<h3 class="popover-header">Popover right</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
<div class="arrow" style="bottom: 0px"></div>
<h3 class="popover-header">Popover righttop</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
<div class="arrow" style="top: 0px"></div>
<h3 class="popover-header">Popover rightbottom</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow" style="left: calc(50% - 8px)"></div>
<h3 class="popover-header">Popover bottom</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow" style="right: 0px"></div>
<h3 class="popover-header">Popover bottomleft</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow" style="left: 0px"></div>
<h3 class="popover-header">Popover bottomright</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
<div class="arrow" style="top: calc(50% - 4px)"></div>
<h3 class="popover-header">Popover left</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
<div class="arrow" style="bottom: 0px"></div>
<h3 class="popover-header">Popover lefttop</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
<div class="arrow" style="top: 0px"></div>
<h3 class="popover-header">Popover leftbottom</h3>
<div class="popover-body"> Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
      quam venenatis vestibulum. </div>
</div>
<div class="clearfix"></div>
</div>
<h2 id="triggers" class="bv-no-focus-ring"><span class="bd-content-title">触发器<a class="anchorjs-link" href="#triggers" aria-labelledby="triggers"></a></span></h2>
<p>
  弹出窗口可以通过<code translate="no" class="notranslate text-nowrap">click</code>, 
  <code translate="no" class="notranslate text-nowrap">hover</code>和
  <code translate="no" class="notranslate text-nowrap">focus</code>的任意组合触发（打开/关闭）。
  默认触发器是<code translate="no" class="notranslate text-nowrap">click</code>。或者可以指定<code translate="no" class="notranslate text-nowrap">手动</code>触发器，
  其中只能<a href="#programmatically-disabling-popover" class="font-weight-bold">以编程方式</a>打开或关闭弹出窗口。
</p>
<p>
  如果弹出窗口有多个触发器，则必须清除所有触发器，然后才能关闭弹出窗口。
  如果弹出窗口有触发<code translate="no" class="notranslate text-nowrap">焦点单击</code>，并且它是由<code translate="no" class="notranslate text-nowrap">焦点</code>打开的，
  然后用户单击触发元素，他们必须再次单击它并移动焦点以关闭弹出窗口。
</p>
<h3 id="caveats-with-focus-trigger-on-button-elements" class="bv-no-focus-ring"><span class="bd-content-title">
  关于<code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>元素<code translate="no" class="notranslate text-nowrap">焦点</code> 触发的注意事项

  <a class="anchorjs-link" href="#caveats-with-focus-trigger-on-button-elements" aria-labelledby="caveats-with-focus-trigger-on-button-elements"></a></span>
</h3>
<p>
  为了在仅使用<code translate="no" class="notranslate text-nowrap">焦点</code>触发器时获得正确的跨浏览器和跨平台行为，
  必须使用呈现<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>标记的元素，
  而不是<code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>标记，并且还必须包含<code translate="no" class="notranslate text-nowrap">tabindex="0"</code>属性。
</p>
<p>
  下面将生成一个看起来像按钮的<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>：
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
  <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>
  <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>
  <span class="hljs-attr">v-b-popover.focus</span>=<span class="hljs-string">"'Popover content'"</span>
  <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover title"</span>
&gt;</span>
  Link button with popover directive
<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"link-button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>&gt;</span>
  Link button with popover component
<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"link-button"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover title"</span> <span class="hljs-attr">triggers</span>=<span class="hljs-string">"focus"</span>&gt;</span>
  Popover content
<span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span></pre></figure>
<h3 id="dismiss-on-next-click-self-dismissing" class="bv-no-focus-ring"><span class="bd-content-title">下次单击时关闭（自行关闭）<a class="anchorjs-link" href="#dismiss-on-next-click-self-dismissing" aria-labelledby="dismiss-on-next-click-self-dismissing"></a></span></h3>
<p>
  使用<code translate="no" class="notranslate text-nowrap">focus</code>触发器本身在用户下一次单击时关闭弹出窗口。
  <code translate="no" class="notranslate text-nowrap">focus</code>还使popover在<code translate="no" class="notranslate text-nowrap">focus</code>和<code translate="no" class="notranslate text-nowrap">click</code>上都被激活
  （因为click使元素在大多数浏览器上接收focus，假设它在页面的tab序列中）。
</p>
<p>
  但是，您可以将触发器指定为<code translate="no" class="notranslate text-nowrap">click blur</code>，这将使单击激活弹出窗口，单击元素或将焦点丢失到另一个元素或文档的一部分将关闭弹出窗口。
</p>
<p>
  特殊<code translate="no" class="notranslate text-nowrap">模糊</code>触发器必须与单击触发器结合使用。
</p>
<h2 id="b-popover-component-basic-usage" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code> 组件基本用法<a class="anchorjs-link" href="#b-popover-component-basic-usage" aria-labelledby="b-popover-component-basic-usage"></a></span></h2>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-placements notranslate">
<div class="container-fluid">
<h5 class="my-3">Placement</h5>
<div class="row">
<div class="py-4 text-center col-md-4">
<button id="popover-1-topright" type="button" class="btn btn-primary">topright</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-top" type="button" class="btn btn-primary">top</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-topleft" type="button" class="btn btn-primary">topleft</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-bottomright" type="button" class="btn btn-primary">bottomright</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-bottom" type="button" class="btn btn-primary">bottom</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-bottomleft" type="button" class="btn btn-primary">bottomleft</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-righttop" type="button" class="btn btn-primary">righttop</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-right" type="button" class="btn btn-primary">right</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-lefttop" type="button" class="btn btn-primary">lefttop</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-rightbottom" type="button" class="btn btn-primary">rightbottom</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-left" type="button" class="btn btn-primary">left</button>
</div>
<div class="py-4 text-center col-md-4">
<button id="popover-1-leftbottom" type="button" class="btn btn-primary">leftbottom</button>
</div>
</div>
<h5 class="my-3">Content via properties or slots</h5>
<div class="row">
<div class="py-4 text-center col-md-6">
<button id="popover-2" type="button" class="btn btn-primary">Using properties</button>
</div>
<div class="py-4 text-center col-md-6">
<button id="popover-3" type="button" class="btn btn-primary">Using slots</button>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-3"</span>&gt;</span>Placement<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>
        <span class="hljs-attr">v-for</span>=<span class="hljs-string">"placement in placements"</span>
        <span class="hljs-attr">:key</span>=<span class="hljs-string">"placement"</span>
        <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span>
        <span class="hljs-attr">class</span>=<span class="hljs-string">"py-4 text-center"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">:id</span>=<span class="hljs-string">"`popover-1-${placement}`"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>{{ placement }}<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span>
          <span class="hljs-attr">:target</span>=<span class="hljs-string">"`popover-1-${placement}`"</span>
          <span class="hljs-attr">:placement</span>=<span class="hljs-string">"placement"</span>
          <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover!"</span>
          <span class="hljs-attr">triggers</span>=<span class="hljs-string">"hover focus"</span>
          <span class="hljs-attr">:content</span>=<span class="hljs-string">"`Placement ${placement}`"</span>
        &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-3"</span>&gt;</span>Content via properties or slots<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-4 text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-2"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Using properties<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span>
          <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-2"</span>
          <span class="hljs-attr">title</span>=<span class="hljs-string">"Prop Examples"</span>
          <span class="hljs-attr">triggers</span>=<span class="hljs-string">"hover focus"</span>
          <span class="hljs-attr">content</span>=<span class="hljs-string">"Embedding content using properties is easy"</span>
        &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-4 text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-3"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Using slots<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-3"</span> <span class="hljs-attr">triggers</span>=<span class="hljs-string">"hover focus"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:title</span>&gt;</span>Content via Slots<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
          Embedding content <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>&gt;</span>using slots<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> affords you
          <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>greater <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>control.<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> and basic HTML support.
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">placements</span>: [
          <span class="hljs-string">'topright'</span>,
          <span class="hljs-string">'top'</span>,
          <span class="hljs-string">'topleft'</span>,
          <span class="hljs-string">'bottomright'</span>,
          <span class="hljs-string">'bottom'</span>,
          <span class="hljs-string">'bottomleft'</span>,
          <span class="hljs-string">'righttop'</span>,
          <span class="hljs-string">'right'</span>,
          <span class="hljs-string">'lefttop'</span>,
          <span class="hljs-string">'rightbottom'</span>,
          <span class="hljs-string">'left'</span>,
          <span class="hljs-string">'leftbottom'</span>
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="component-options-via-props" class="bv-no-focus-ring"><span class="bd-content-title">通过属性的组件选项<a class="anchorjs-link" href="#component-options-via-props" aria-labelledby="component-options-via-props"></a></span></h3>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>默认值</th>
<th>描述</th>
<th>支持的值</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">target</code></td>
<td><code translate="no" class="notranslate text-nowrap">null</code></td>
<td>要触发弹出窗口的元素字符串ID或对元素或组件的引用。<strong>Required</strong></td>
<td>任何有效的文档内唯一元素ID或文档内元素/组件参考</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">title</code></td>
<td><code translate="no" class="notranslate text-nowrap">null</code></td>
<td>
  弹出式标题（仅文本，无HTML）。如果需要HTML或reactivity，请使用名为slot的<code translate="no" class="notranslate text-nowrap">标题</code>
</td>
<td>纯文本</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">content</code></td>
<td><code translate="no" class="notranslate text-nowrap">null</code></td>
<td>Popover内容（仅文本，不使用HTML）。如果需要HTML或reactivity，请使用默认槽</td>
<td>纯文本</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">placement</code></td>
<td><code translate="no" class="notranslate text-nowrap">'right'</code></td>
<td>相对于触发器元素定位弹出窗口。</td>
<td><code translate="no" class="notranslate text-nowrap">auto</code>, <code translate="no" class="notranslate text-nowrap">top</code>, <code translate="no" class="notranslate text-nowrap">bottom</code>, <code translate="no" class="notranslate text-nowrap">left</code>, <code translate="no" class="notranslate text-nowrap">right</code>, <code translate="no" class="notranslate text-nowrap">topleft</code>, <code translate="no" class="notranslate text-nowrap">topright</code>, <code translate="no" class="notranslate text-nowrap">bottomleft</code>, <code translate="no" class="notranslate text-nowrap">bottomright</code>, <code translate="no" class="notranslate text-nowrap">lefttop</code>, <code translate="no" class="notranslate text-nowrap">leftbottom</code>, <code translate="no" class="notranslate text-nowrap">righttop</code>, <code translate="no" class="notranslate text-nowrap">rightbottom</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">fallback-placement</code></td>
<td><code translate="no" class="notranslate text-nowrap">'flip'</code></td>
<td>相对于触发器元素，弹出窗口的自动翻转放置行为。</td>
<td>
  从左到右<code translate="no" class="notranslate text-nowrap">翻转</code>, 
  <code translate="no" class="notranslate text-nowrap">顺时针</code>, 
  <code translate="no" class="notranslate text-nowrap">逆时针</code>, 或有效位置数组
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">disabled</code></td>
<td><code translate="no" class="notranslate text-nowrap">false</code></td>
<td>
  Popover显示状态的编程控制。建议与<a href="https://vuejs.org/v2/guide/components.html#sync-Modifier" target="_blank" rel="noopener">同步修改器</a>一起使用。
</td>
<td><code translate="no" class="notranslate text-nowrap">true</code>, <code translate="no" class="notranslate text-nowrap">false</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">triggers</code></td>
<td><code translate="no" class="notranslate text-nowrap">'click'</code></td>
<td>以空格分隔的事件列表，它将使用内置处理触发打开/关闭popover</td>
<td>
  <code translate="no" class="notranslate text-nowrap">悬停</code>, 
  <code translate="no" class="notranslate text-nowrap">聚焦</code>, 
  <code translate="no" class="notranslate text-nowrap">点击</code>。注意
  <code translate="no" class="notranslate text-nowrap">blur</code>是一个特殊的用例，用于在下次单击时关闭popover。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">no-fade</code></td>
<td><code translate="no" class="notranslate text-nowrap">false</code></td>
<td>
  设置为<code translate="no" class="notranslate text-nowrap">true</code>时禁用淡入淡出动画
</td>
<td><code translate="no" class="notranslate text-nowrap">true</code> or <code translate="no" class="notranslate text-nowrap">false</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">delay</code></td>
<td><code translate="no" class="notranslate text-nowrap">50</code></td>
<td>
  按指定的毫秒数延迟显示和隐藏弹出窗口。也可以定义为 <code translate="no" class="notranslate text-nowrap">{ show: 100, hide: 400 }</code>形式的对象，允许不同的显示和隐藏延迟
</td>
<td><code translate="no" class="notranslate text-nowrap">0</code> 及以上，仅整数。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">offset</code></td>
<td><code translate="no" class="notranslate text-nowrap">0</code></td>
<td>按指定的像素数移动弹出框的中心。也会影响弹出箭头的位置。</td>
<td>任何负整数或正整数</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">container</code></td>
<td><code translate="no" class="notranslate text-nowrap">null</code></td>
<td>
  要将呈现的弹出窗口附加到的元素字符串ID。如果未找到<code translate="no" class="notranslate text-nowrap">null</code>或元素，
  则popover将附加到<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>（默认值）
</td>
<td>文档中任何有效的唯一元素ID。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">boundary</code></td>
<td><code translate="no" class="notranslate text-nowrap">'scrollParent'</code></td>
<td>
  弹出窗口将在视觉上受到约束的容器。默认值在大多数情况下应该足够了，但是如果目标元素位于带有溢出滚动条的小容器中，则可能需要更改此值
  </td>
<td>
  <code translate="no" class="notranslate text-nowrap">'scrollParent'</code>（默认）、 <code translate="no" class="notranslate text-nowrap">'viewport'</code>、
  <code translate="no" class="notranslate text-nowrap">'window'</code>或对HTML元素的引用。
  </td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">boundary-padding</code></td>
<td><code translate="no" class="notranslate text-nowrap">5</code></td>
<td>
  用于定义边界和弹出窗口之间最小距离的像素数。这可以确保popover的容器边缘之间始终有一个小填充。
</td>
<td>任何正数</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">variant</code></td>
<td><code translate="no" class="notranslate text-nowrap">null</code></td>
<td>弹出窗口的上下文颜色变体</td>
<td>任何上下文主题颜色变体名称</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">custom-class</code></td>
<td><code translate="no" class="notranslate text-nowrap">null</code></td>
<td>应用于popover外部包装元素的自定义类名</td>
<td>A string</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">id</code></td>
<td><code translate="no" class="notranslate text-nowrap">null</code></td>
<td>
  用于popover根元素的ID。如果没有提供，则会自动生成一个。如果您确实提供了一个ID，那么必须保证它在呈现的页面上是唯一的。
</td>
<td>有效的唯一元素ID字符串</td>
</tr>
</tbody>
</table>
</div>
<h3 id="variants-and-custom-class" class="bv-no-focus-ring"><span class="bd-content-title">变量和自定义类<a class="anchorjs-link" href="#variants-and-custom-class" aria-labelledby="variants-and-custom-class"></a></span></h3>
<p>
  BootstrapVue的弹出窗口通过我们的自定义CSS，通过<code translate="no" class="notranslate text-nowrap">变量</code>属性支持上下文颜色变体：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-variant notranslate">
<div class="text-center"><a id="popover-button-variant" tabindex="0" role="button" target="_self" href="#" class="btn btn-secondary">Button</a> </div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-button-variant"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-button-variant"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">triggers</span>=<span class="hljs-string">"focus"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:title</span>&gt;</span>Danger!<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    Danger variant popover
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  引导默认的主题变量有：<code translate="no" class="notranslate text-nowrap">danger</code>, 
  <code translate="no" class="notranslate text-nowrap">warning</code>,
   <code translate="no" class="notranslate text-nowrap">success</code>, 
   <code translate="no" class="notranslate text-nowrap">primary</code>, 
   <code translate="no" class="notranslate text-nowrap">secondary</code>, 
   <code translate="no" class="notranslate text-nowrap">info</code>,
    <code translate="no" class="notranslate text-nowrap">light</code>,和
    <code translate="no" class="notranslate text-nowrap">dark</code>。
    您可以通过Bootstrap<a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">SCSS 变量</a>更改或添加其他变量
  </p>
<p>
  通过使用<code translate="no" class="notranslate text-nowrap">自定义类</code>属性，可以将自定义类应用于popover外部包装器<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code> ：
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-button"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"my-button"</span> <span class="hljs-attr">custom-class</span>=<span class="hljs-string">"my-popover-class"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:title</span>&gt;</span>Popover Title<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    Popover content
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  <code translate="no" class="notranslate text-nowrap">variant</code>和
   <code translate="no" class="notranslate text-nowrap">custom-class</code>是被动的，可以在popover打开时更改。
</p>
<p>
  请参阅<a href="../../../bootstrap-vue/docs/directives/popover" class="font-weight-bold">popover指令</a>文档，了解如何将变量和自定义类应用于指令版本。
</p>
<h3 id="programmatically-show-and-hide-popover" class="bv-no-focus-ring"><span class="bd-content-title">显示和隐藏弹出窗口<a class="anchorjs-link" href="#programmatically-show-and-hide-popover" aria-labelledby="programmatically-show-and-hide-popover"></a></span></h3>
<p>
  您可以通过可同步布尔值显示属性手动控制弹出窗口的<code translate="no" class="notranslate text-nowrap">可见性</code>。设置为<code translate="no" class="notranslate text-nowrap">true</code>将显示弹出窗口，
  而设置为<code translate="no" class="notranslate text-nowrap">false</code>将隐藏弹出窗口。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-show-sync notranslate">
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<button id="popover-button-sync" type="button" class="btn btn-primary">I have a popover</button>
</div>
<div class="p-2">
<button type="button" class="btn px-1 btn-secondary">Toggle Popover</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex-column text-md-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-button-sync"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>I have a popover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"show = !show"</span>&gt;</span>Toggle Popover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">:show.sync</span>=<span class="hljs-string">"show"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-button-sync"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span>&gt;</span>
        Hello <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>World!<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  通过引用向popover提交<code translate="no" class="notranslate text-nowrap">'打卡'</code> 和<code translate="no" class="notranslate text-nowrap">'关闭'</code>事件也会影响程序控制。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-show-event notranslate">
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<button id="popover-button-event" type="button" class="btn btn-primary">I have a popover</button>
</div>
<div class="p-2">
<button type="button" class="btn px-1 btn-secondary">Open</button>
<button type="button" class="btn px-1 btn-secondary">Close</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex-column text-md-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-button-event"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>I have a popover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onOpen"</span>&gt;</span>Open<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onClose"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"popover"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-button-event"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span>&gt;</span>
      Hello <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>World!<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      onOpen() {
        <span class="hljs-keyword">this</span>.$refs.popover.$emit(<span class="hljs-string">'open'</span>)
      },
      onClose() {
        <span class="hljs-keyword">this</span>.$refs.popover.$emit(<span class="hljs-string">'close'</span>)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  要使弹出窗口显示在初始渲染中，只需在<code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code>上添加显示道具：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-show-open notranslate">
<div class="text-center">
<button id="popover-button-open" type="button" class="btn btn-primary" aria-describedby="__bv_popover_1321__">Button</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-button-open"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">show</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-button-open"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span>&gt;</span>
    I start <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>open<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>通过“show”属性或事件调用以编程方式打开的popover只能以编程方式关闭。内置触发器将无法充分工作，因为触发器事件将尝试打开popover，即使它已经打开。</p>
<p>在下面的示例中，当第一个弹出窗口用“打开”事件打开时，需要单击两次按钮才能将其关闭。玩下面的演示来理解这一点。当您希望优雅地处理Popover组件的编程控制和用户交互触发器时，应该禁用内置触发器，并按照第二个Popover演示的那样处理自己的控制。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-advanced-caution notranslate">
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<button id="popover-manual-1" type="button" class="btn btn-primary">Unreliable</button>
</div>
<div class="p-2">
<button id="popover-manual-2" type="button" class="btn btn-primary"> Comfortably Numb </button>
</div>
<div class="p-2">
<button type="button" class="btn px-1 btn-secondary">Open</button>
<button type="button" class="btn px-1 btn-secondary">Close</button>
<button type="button" class="btn px-1 btn-secondary">Toggle</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex-column text-md-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-manual-1"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"button"</span>&gt;</span>Unreliable<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-manual-1"</span> <span class="hljs-attr">:show.sync</span>=<span class="hljs-string">"pop1"</span> <span class="hljs-attr">triggers</span>=<span class="hljs-string">"click"</span>&gt;</span>
        I can be stubborn sometimes.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-manual-2"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"button"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"pop2 = !pop2"</span>&gt;</span>
        Comfortably Numb
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-manual-2"</span> <span class="hljs-attr">:show.sync</span>=<span class="hljs-string">"pop2"</span> <span class="hljs-attr">triggers</span>=<span class="hljs-string">""</span>&gt;</span>
        I do believe it's working, good.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"popOpen"</span>&gt;</span>Open<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"popClose"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"popToggle"</span>&gt;</span>Toggle<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">pop1</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">pop2</span>: <span class="hljs-literal">false</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      popOpen() {
        <span class="hljs-keyword">this</span>.pop1 = <span class="hljs-keyword">this</span>.pop2 = <span class="hljs-literal">true</span>
      },
      popClose() {
        <span class="hljs-keyword">this</span>.pop1 = <span class="hljs-keyword">this</span>.pop2 = <span class="hljs-literal">false</span>
      },
      popToggle() {
        <span class="hljs-keyword">this</span>.pop1 = !<span class="hljs-keyword">this</span>.pop1
        <span class="hljs-keyword">this</span>.pop2 = !<span class="hljs-keyword">this</span>.pop2
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  您还可以使用$root事件触发弹出窗口的显示和隐藏。有关详细信息，请参阅下面的“通过<code translate="no" class="notranslate text-nowrap">$root</code>事件隐藏和显示弹出窗口”部分。
</p>
<h3 id="programmatically-disabling-popover" class="bv-no-focus-ring"><span class="bd-content-title">以编程方式禁用popover<a class="anchorjs-link" href="#programmatically-disabling-popover" aria-labelledby="programmatically-disabling-popover"></a></span></h3>
<p>
  您可以通过<code translate="no" class="notranslate text-nowrap">disabled</code>可同步布尔属性（默认值为<code translate="no" class="notranslate text-nowrap">false</code>）
  禁用popover，将其设置为<code translate="no" class="notranslate text-nowrap">true</code>将禁用popover。如果popover在<code translate="no" class="notranslate text-nowrap">disabled</code>设置为
  <code translate="no" class="notranslate text-nowrap">false</code>时当前可见，则在启用或以编程方式关闭之前，它将保持可见。如果通过$root events禁用/启用了弹出窗口（请参见下文），
  则只要您提供了<code translate="no" class="notranslate text-nowrap">.sync</code>属性修饰符，您的禁用值就会更新。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-disable notranslate">
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<button id="popover-button-disable" type="button" class="btn btn-primary">I have a popover</button>
</div>
<div class="p-2">
<button type="button" class="btn btn-secondary"> Disable Popover by prop </button>
<button type="button" class="btn btn-secondary"> Disable Popover by $ref event </button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex-column text-md-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-button-disable"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>I have a popover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"disabled = !disabled"</span>&gt;</span>
        {{ disabled ? 'Enable' : 'Disable' }} Popover by prop
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"disableByRef"</span>&gt;</span>
        {{ disabled ? 'Enable' : 'Disable' }} Popover by $ref event
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span>
        <span class="hljs-attr">:disabled.sync</span>=<span class="hljs-string">"disabled"</span>
        <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-button-disable"</span>
        <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span>
        <span class="hljs-attr">ref</span>=<span class="hljs-string">"popover"</span>
      &gt;</span>
        Hello <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>World!<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      disableByRef() {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.disabled) {
          <span class="hljs-keyword">this</span>.$refs.popover.$emit(<span class="hljs-string">'enable'</span>)
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">this</span>.$refs.popover.$emit(<span class="hljs-string">'disable'</span>)
        }
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  通过引用向popover提交<code translate="no" class="notranslate text-nowrap">'enable'</code>和<code translate="no" class="notranslate text-nowrap">'disable'</code>事件也会影响编程控制。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-disabled-event notranslate">
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<button id="popover-button-disable-event" type="button" class="btn btn-primary">I have a popover</button>
</div>
<div class="p-2">
<button type="button" class="btn px-1 btn-secondary">Enable</button>
<button type="button" class="btn px-1 btn-secondary">Disable</button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex-column text-md-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-button-disable-event"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>I have a popover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onEnable"</span>&gt;</span>Enable<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onDisable"</span>&gt;</span>Disable<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"popover"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-button-disable-event"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span>&gt;</span>
      Hello <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>World!<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      onEnable() {
        <span class="hljs-keyword">this</span>.$refs.popover.$emit(<span class="hljs-string">'enable'</span>)
      },
      onDisable() {
        <span class="hljs-keyword">this</span>.$refs.popover.$emit(<span class="hljs-string">'disable'</span>)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  禁用后，可以通过编程方式（通过<code translate="no" class="notranslate text-nowrap">show</code> prop、methods或events）打开弹出窗口
</p>
<p>
  您还可以使用<code translate="no" class="notranslate text-nowrap">$root</code>事件触发禁用和启用popover。
  有关详细信息，请参阅下面的<strong>通过$root events禁用和启用弹出窗口</strong>部分。
</p>
<h2 id="v-b-popover-directive-usage" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">v-b-popover</code>指令用法<a class="anchorjs-link" href="#v-b-popover-directive-usage" aria-labelledby="v-b-popover-directive-usage"></a></span></h2>
<p>
  只需要没有太多标记的快速弹出窗口？ 使用<a href="../../../bootstrap-vue/docs/directives/popover" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">v-b-popover</code>指令</a>：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-directive-placement notranslate">
<div>
<div class="container-fluid">
<div class="row text-center">
<div class="py-3 col-md-3">
<button title="Title" type="button" class="btn btn-primary">Top</button>
</div>
<div class="py-3 col-md-3">
<button title="Title" type="button" class="btn btn-primary">Right</button>
</div>
<div class="py-3 col-md-3">
<button title="Title" type="button" class="btn btn-primary">Left</button>
</div>
<div class="py-3 col-md-3">
<button title="Title" type="button" class="btn btn-primary">Bottom</button>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.top</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.right</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.left</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover.hover.bottom</span>=<span class="hljs-string">"'Popover!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  有关指令用法的详细信息，请参阅<a href="../../../bootstrap-vue/docs/directives/popover" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">v-b-popover</code> 指令</a>文档。
</p>
<h2 id="advanced-b-popover-usage-with-reactive-content" class="bv-no-focus-ring"><span class="bd-content-title">高级 <code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code>使用反应性内容<a class="anchorjs-link" href="#advanced-b-popover-usage-with-reactive-content" aria-labelledby="advanced-b-popover-usage-with-reactive-content"></a></span></h2>
<p>
  你甚至可以让你的<code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code>内容互动。请记住不要使用<code translate="no" class="notranslate text-nowrap"></code>
  或触发器（只使用<code translate="no" class="notranslate text-nowrap">click</code>）。
</p>
<p>
  如果绝对必须使用<code translate="no" class="notranslate text-nowrap">click</code>以外的触发器（或者希望在第二次单击触发器元素时禁用关闭popover），则可以：
</p>
<ul>
<li>
  监听<code translate="no" class="notranslate text-nowrap">&lt;b-popover&gt;</code>元素上的<code translate="no" class="notranslate text-nowrap">hide</code>事件，
  并在传递给<code translate="no" class="notranslate text-nowrap">hide</code>处理程序的<code translate="no" class="notranslate text-nowrap">BvEvent</code>对象上调用
  <code translate="no" class="notranslate text-nowrap">preventDefault()</code>方法（如果合适）；
</li>
<li>
  一旦弹出窗口开始打开（通过 <code translate="no" class="notranslate text-nowrap">show</code>事件），就禁用触发器元素（如果可能），
  并在适当时重新启用它（即通过<code translate="no" class="notranslate text-nowrap">hide</code>或
  <code translate="no" class="notranslate text-nowrap">hidden</code>事件）。
</li>
</ul>
<p>
  出于实际目的，<strong>交互式内容弹出应该是最小的</strong>。弹出窗口的最大宽度由引导v4 CSS硬编码为<code translate="no" class="notranslate text-nowrap">276px</code>。小屏幕上的高弹出窗口在移动设备（如智能手机）上可能更难处理。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-popover-advanced notranslate">
<div id="my-container">
<div class="my-3">
<button id="popover-reactive-1" type="button" class="btn btn-primary"> Reactive Content Using Slots </button>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-container"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-3"</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- Our triggering (target) element --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-reactive-1"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"button"</span>&gt;</span>
        Reactive Content Using Slots
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- Output from the popover interaction --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Returned values:"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"input1Return &amp;&amp; input2Return"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-text"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"max-width: 20rem;"</span>&gt;</span>
        Name: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ input1Return }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
        Color: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ input2Return }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- Our popover title and content render container --&gt;</span>
    <span class="hljs-comment">&lt;!-- We use placement 'auto' so popover fits in the best spot on viewport --&gt;</span>
    <span class="hljs-comment">&lt;!-- We specify the same container as the trigger button, so that popover is close to button --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-popover</span>
      <span class="hljs-attr">target</span>=<span class="hljs-string">"popover-reactive-1"</span>
      <span class="hljs-attr">triggers</span>=<span class="hljs-string">"click"</span>
      <span class="hljs-attr">:show.sync</span>=<span class="hljs-string">"popoverShow"</span>
      <span class="hljs-attr">placement</span>=<span class="hljs-string">"auto"</span>
      <span class="hljs-attr">container</span>=<span class="hljs-string">"my-container"</span>
      <span class="hljs-attr">ref</span>=<span class="hljs-string">"popover"</span>
      @<span class="hljs-attr">show</span>=<span class="hljs-string">"onShow"</span>
      @<span class="hljs-attr">shown</span>=<span class="hljs-string">"onShown"</span>
      @<span class="hljs-attr">hidden</span>=<span class="hljs-string">"onHidden"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:title</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onClose"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-symbol">&amp;times;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        Interactive Content
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Name"</span>
          <span class="hljs-attr">label-for</span>=<span class="hljs-string">"popover-input-1"</span>
          <span class="hljs-attr">label-cols</span>=<span class="hljs-string">"3"</span>
          <span class="hljs-attr">:state</span>=<span class="hljs-string">"input1state"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>
          <span class="hljs-attr">description</span>=<span class="hljs-string">"Enter your name"</span>
          <span class="hljs-attr">invalid-feedback</span>=<span class="hljs-string">"This field is required"</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
            <span class="hljs-attr">ref</span>=<span class="hljs-string">"input1"</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-input-1"</span>
            <span class="hljs-attr">v-model</span>=<span class="hljs-string">"input1"</span>
            <span class="hljs-attr">:state</span>=<span class="hljs-string">"input1state"</span>
            <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Color"</span>
          <span class="hljs-attr">label-for</span>=<span class="hljs-string">"popover-input-2"</span>
          <span class="hljs-attr">label-cols</span>=<span class="hljs-string">"3"</span>
          <span class="hljs-attr">:state</span>=<span class="hljs-string">"input2state"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>
          <span class="hljs-attr">description</span>=<span class="hljs-string">"Pick a color"</span>
          <span class="hljs-attr">invalid-feedback</span>=<span class="hljs-string">"This field is required"</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"popover-input-2"</span>
            <span class="hljs-attr">v-model</span>=<span class="hljs-string">"input2"</span>
            <span class="hljs-attr">:state</span>=<span class="hljs-string">"input2state"</span>
            <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
            <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-alert</span> <span class="hljs-attr">show</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Current Values:<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
          Name: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ input1 }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
          Color: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ input2 }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-alert</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onClose"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>Cancel<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onOk"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Ok<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-popover</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">input1</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">input1state</span>: <span class="hljs-literal">null</span>,
        <span class="hljs-attr">input2</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">input2state</span>: <span class="hljs-literal">null</span>,
        <span class="hljs-attr">options</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">'- Choose 1 -'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">''</span> }, <span class="hljs-string">'Red'</span>, <span class="hljs-string">'Green'</span>, <span class="hljs-string">'Blue'</span>],
        <span class="hljs-attr">input1Return</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">input2Return</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">popoverShow</span>: <span class="hljs-literal">false</span>
      }
    },
    <span class="hljs-attr">watch</span>: {
      input1(val) {
        <span class="hljs-keyword">if</span> (val) {
          <span class="hljs-keyword">this</span>.input1state = <span class="hljs-literal">true</span>
        }
      },
      input2(val) {
        <span class="hljs-keyword">if</span> (val) {
          <span class="hljs-keyword">this</span>.input2state = <span class="hljs-literal">true</span>
        }
      }
    },
    <span class="hljs-attr">methods</span>: {
      onClose() {
        <span class="hljs-keyword">this</span>.popoverShow = <span class="hljs-literal">false</span>
      },
      onOk() {
        <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.input1) {
          <span class="hljs-keyword">this</span>.input1state = <span class="hljs-literal">false</span>
        }
        <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.input2) {
          <span class="hljs-keyword">this</span>.input2state = <span class="hljs-literal">false</span>
        }
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.input1 &amp;&amp; <span class="hljs-keyword">this</span>.input2) {
          <span class="hljs-keyword">this</span>.onClose()
          <span class="hljs-comment">// Return our popover form results</span>
          <span class="hljs-keyword">this</span>.input1Return = <span class="hljs-keyword">this</span>.input1
          <span class="hljs-keyword">this</span>.input2Return = <span class="hljs-keyword">this</span>.input2
        }
      },
      onShow() {
        <span class="hljs-comment">// This is called just before the popover is shown</span>
        <span class="hljs-comment">// Reset our popover form variables</span>
        <span class="hljs-keyword">this</span>.input1 = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.input2 = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.input1state = <span class="hljs-literal">null</span>
        <span class="hljs-keyword">this</span>.input2state = <span class="hljs-literal">null</span>
        <span class="hljs-keyword">this</span>.input1Return = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.input2Return = <span class="hljs-string">''</span>
      },
      onShown() {
        <span class="hljs-comment">// Called just after the popover has been shown</span>
        <span class="hljs-comment">// Transfer focus to the first input</span>
        <span class="hljs-keyword">this</span>.focusRef(<span class="hljs-keyword">this</span>.$refs.input1)
      },
      onHidden() {
        <span class="hljs-comment">// Called just after the popover has finished hiding</span>
        <span class="hljs-comment">// Bring focus back to the button</span>
        <span class="hljs-keyword">this</span>.focusRef(<span class="hljs-keyword">this</span>.$refs.button)
      },
      focusRef(ref) {
        <span class="hljs-comment">// Some references may be a component, functional component, or plain element</span>
        <span class="hljs-comment">// This handles that check before focusing, assuming a `focus()` method exists</span>
        <span class="hljs-comment">// We do this in a double `$nextTick()` to ensure components have</span>
        <span class="hljs-comment">// updated &amp; popover positioned first</span>
        <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
          <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
            ;(ref.$el || ref).focus()
          })
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="global-root-instance-events" class="bv-no-focus-ring"><span class="bd-content-title">'全局'$ root实例事件<a class="anchorjs-link" href="#global-root-instance-events" aria-labelledby="global-root-instance-events"></a></span></h2>
<p>
  使用<code translate="no" class="notranslate text-nowrap">$root</code>实例，可以在组件之外的某个地方发出和侦听事件，
  其中使用<code translate="no" class="notranslate text-nowrap">&lt;b-collapse&gt;</code>。简而言之，
  <code translate="no" class="notranslate text-nowrap">$root</code>的行为类似于全局事件发射器和侦听器。
  有关<code translate="no" class="notranslate text-nowrap">$root</code>实例的详细信息可以在<a href="https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance" target="_blank" rel="noopener">官方Vue文档</a>中找到。
</p>
<h3 id="hiding-and-showing-popovers-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$root events隐藏和显示弹出窗口<a class="anchorjs-link" href="#hiding-and-showing-popovers-via-root-events" aria-labelledby="hiding-and-showing-popovers-via-root-events"></a></span></h3>
<p>
  通过在$root上发出<code translate="no" class="notranslate text-nowrap">bv::hide::popover</code>事件，可以关闭（隐藏）<strong>所有打开的弹出窗口</strong>：
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::hide::popover'</span>)</pre></figure>
<p>
  要关闭<strong>特定的popover</strong>，请将触发器元素的<code translate="no" class="notranslate text-nowrap">id</code>或popover的<code translate="no" class="notranslate text-nowrap">id</code>
  （如果是通过<code translate="no" class="notranslate text-nowrap">id</code> 属性提供的）作为第一个参数传递：
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::hide::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre></figure>
<p>
  要打开（显示） <strong>特定的popover</strong>，请在发出<code translate="no" class="notranslate text-nowrap">bv::show::popover</code>
  事件时将触发器元素的<code translate="no" class="notranslate text-nowrap">id</code>或popover的<code translate="no" class="notranslate text-nowrap">id</code>
  （如果是通过<code translate="no" class="notranslate text-nowrap">id</code>属性提供的）作为第一个参数传递：
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre></figure>
<p>
  要同时打开所有弹出窗口，请在发出<code translate="no" class="notranslate text-nowrap">bv::show::popover</code>事件时省略<code translate="no" class="notranslate text-nowrap">id</code>参数。
</p>
<p>这些事件适用于Popover的组件版本<strong>和</strong>指令版本。</p>
<p><strong>注意:触发器元素</strong>必须存在于DOM中并且处于可见状态，以便popover实例化和显示</p>
<h3 id="disabling-and-enabling-popovers-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$root events禁用和启用弹出窗口<a class="anchorjs-link" href="#disabling-and-enabling-popovers-via-root-events" aria-labelledby="disabling-and-enabling-popovers-via-root-events"></a></span></h3>
<p>
  您可以通过在$root上发出<code translate="no" class="notranslate text-nowrap">bv::disable::popover</code>事件来禁用<strong>所有</strong>弹出窗口：
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::popover'</span>)</pre></figure>
<p>
  要禁用<strong>特定的popover</strong>，请将触发器元素的<code translate="no" class="notranslate text-nowrap">id</code>
  或popover的<code translate="no" class="notranslate text-nowrap">id</code>
  （如果是通过<code translate="no" class="notranslate text-nowrap">id</code>属性提供的）作为第一个参数传递：
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre></figure>
<p>
  要启用<strong>特定的popover</strong>，请在发出<code translate="no" class="notranslate text-nowrap">bv::enable::popover</code>事件时将触发器元素的
  <code translate="no" class="notranslate text-nowrap">id</code>或popover的<code translate="no" class="notranslate text-nowrap">id</code>
  （如果是通过<code translate="no" class="notranslate text-nowrap">id</code>属性提供的）作为第一个参数传递：
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::enable::popover'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre></figure>
<p>
  要同时启用所有弹出窗口，请在发出<code translate="no" class="notranslate text-nowrap">bv::enable::popover</code>事件时省略<code translate="no" class="notranslate text-nowrap">id</code>参数。
</p>
<p>这些事件对popover的组件和指令版本都有效。</p>
<p><strong>注意:</strong> <strong>触发器元素</strong>必须存在于DOM中，才能启用或禁用popover。</p>
<h3 id="listening-to-popover-changes-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$ root事件监听弹出窗口更改<a class="anchorjs-link" href="#listening-to-popover-changes-via-root-events" aria-labelledby="listening-to-popover-changes-via-root-events"></a></span></h3>
<p>要监听任何弹出窗口，请使用：</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  mounted() {
    <span class="hljs-keyword">this</span>.$root.$on(<span class="hljs-string">'bv::popover::show'</span>, bvEventObj =&gt; {
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'bvEventObj:'</span>, bvEventObj)
    })
  }
}</pre></figure>
<p>
  有关事件的完整列表，请参阅文档的<a href="../../../bootstrap-vue/docs/components/popover#component-reference" class="font-weight-bold">事件</a>部分。
</p>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">辅助功能<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>
  在当前的实现中，popover用作交互组件时不太容易访问。内容可能不会主动读取给屏幕阅读器用户，并且popover标记可能不会位于DOM中的trigger元素附近
  （因为popover通常会附加到<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>的末尾）。
</p>
<p>
  当使用弹出窗口作为交互组件时，如果可能，您应该将焦点转移到弹出窗口中。当popover关闭时，您应该将焦点返回到触发元素
  （假设<code translate="no" class="notranslate text-nowrap">focus</code>没有用作触发器方法），正如我们在上面的示例中所做的那样。
</p>
<p>当用户与popover内容交互时，您可能还希望在popover内容中实现焦点包含（将焦点保持在popover中，直到用户关闭它）。</p>
<h3 id="making-popovers-work-for-keyboard-and-assistive-technology-users" class="bv-no-focus-ring"><span class="bd-content-title">
  为键盘和辅助技术用户制作弹出窗口<a class="anchorjs-link" href="#making-popovers-work-for-keyboard-and-assistive-technology-users" aria-labelledby="making-popovers-work-for-keyboard-and-assistive-technology-users"></a></span></h3>
<p>
  要允许键盘用户激活弹出窗口，只需将其添加到传统键盘可聚焦和交互式的HTML元素（如链接或表单控件）。
  尽管可以通过添加<code translate="no" class="notranslate text-nowrap">tabindex="0"</code>属性使任意HTML元素（如<code translate="no" class="notranslate text-nowrap">&lt;span&gt;</code>s）成为可聚焦的，
    但这将在键盘用户的非交互元素上添加潜在的恼人和令人困惑的制表位，而且大多数辅助技术目前在这种情况下不会公布popover的内容。另外，
    不要仅仅依赖于鼠标悬停作为弹出窗口的触发器，因为这将使键盘用户无法触发它们。
</p>
<p>
  虽然您可以通过插槽在弹出窗口中插入丰富、结构化的HTML和/或组件，但我们强烈建议您避免添加过多的内容。弹出窗口当前的工作方式是，一旦显示，
  它们的内容就绑定到具有<code translate="no" class="notranslate text-nowrap">aria-describedby</code>属性的触发器元素。因此，popover的全部内容将作为一个长的、不间断的流向辅助技术用户公布（读取）。
</p>
<p>
  此外，虽然也可以在popover中包含交互控件（如表单元素或链接），但请注意，当前popover不管理键盘焦点顺序。当键盘用户打开弹出窗口时，
  焦点仍停留在触发元素上，并且由于弹出窗口通常不会立即跟随文档结构中的触发器，因此无法保证向前移动/按<kbd class="notranslate" translate="no">TAB</kbd>键会将键盘用户移动到弹出窗口本身。
  简而言之，简单地将交互控件添加到popover中可能会使键盘用户和辅助技术用户无法访问/使用这些控件，或者至少会使整个焦点顺序不合逻辑。在这些情况下，请考虑改用<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>对话框。
</p>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/popover#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-popover" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-popover&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/popover#comp-ref-b-popover" class="anchorjs-link" aria-labelledby="comp-ref-b-popover" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/popover/popover.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-popover-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-popover&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-popover-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-popover&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-popover-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-popover&gt;</code> 事件 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-popover-rootEventListeners"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-popover&gt;</code> <code data-v-866a22e8="" translate="translate" class="notranslate">$root</code> 事件监听器 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-popover-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/popover#comp-ref-b-popover-props" class="anchorjs-link" aria-labelledby="comp-ref-b-popover-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1172">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="title" class="" id="__BVID__1172__row_title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在弹出窗口标题中的文本</td>
</tr>
<tr role="row" data-pk="target" class="" id="__BVID__1172__row_target">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">target</code> <span data-v-866a22e8="" class="badge badge-info">Required</span></td>
<td aria-colindex="2" role="cell" class="">String or HTMLElement or SVGElement or Function or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要触发弹出窗口的元素字符串ID或对元素或组件的引用。</td>
</tr>
<tr role="row" data-pk="triggers" class="" id="__BVID__1172__row_triggers">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">triggers</code></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'click'</code></td>
<td aria-colindex="4" role="cell" class="">
  指定哪些触发器将显示弹出窗口。支持的值有“click”、“hover”、“focus”。有关特殊触发器“模糊”和“手动”的信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="placement" class="" id="__BVID__1172__row_placement">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">placement</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'right'</code></td>
<td aria-colindex="4" role="cell" class="">
  弹出框的位置：“顶部”、“底部”、“右侧”、“左侧”、“顶部左侧”、“顶部右侧”、“底部左侧”、“底部右侧”、“左侧顶部”、“左侧底部”、“右侧顶部”、“右侧底部”之一</td>
</tr>
<tr role="row" data-pk="fallback-placement" class="" id="__BVID__1172__row_fallback-placement">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fallback-placement</code></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'flip'</code></td>
<td aria-colindex="4" role="cell" class="">当弹出窗口超出边界时使用的位置。请参阅文档以了解更多详细信息</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__1172__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于组件</td>
</tr>
<tr role="row" data-pk="custom-class" class="" id="__BVID__1172__row_custom-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">custom-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于popover根元素的CSS类</td>
</tr>
<tr role="row" data-pk="delay" class="" id="__BVID__1172__row_delay">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">delay</code></td>
<td aria-colindex="2" role="cell" class="">Number or Object or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">50</code></td>
<td aria-colindex="4" role="cell" class="">
  显示和隐藏延迟的值。当指定为数字或字符串时，同时应用于“显示”和“隐藏”。使用对象窗体分别设置显示和隐藏延迟</td>
</tr>
<tr role="row" data-pk="boundary" class="" id="__BVID__1172__row_boundary">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">boundary</code></td>
<td aria-colindex="2" role="cell" class="">String or HTMLElement or Object</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'scrollParent'</code></td>
<td aria-colindex="4" role="cell" class="">弹出窗口的边界约束：“scrollParent”、“window”、“viewport”或对HTMLElement或组件的引用</td>
</tr>
<tr role="row" data-pk="boundary-padding" class="" id="__BVID__1172__row_boundary-padding">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">boundary-padding</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">5</code></td>
<td aria-colindex="4" role="cell" class="">popover将尝试以指定的像素数远离边界元素的边缘</td>
</tr>
<tr role="row" data-pk="offset" class="" id="__BVID__1172__row_offset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">箭头中心相对于触发器目标元素的偏移量（像素）</td>
</tr>
<tr role="row" data-pk="no-fade" class="" id="__BVID__1172__row_no-fade">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-fade</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件上的淡入动画/过渡</td>
</tr>
<tr role="row" data-pk="container" class="" id="__BVID__1172__row_container">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">container</code></td>
<td aria-colindex="2" role="cell" class="">String or HTMLElement or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">显示时附加呈现的弹出窗口的容器元素。默认为body元素</td>
</tr>
<tr role="row" data-pk="show" class="" id="__BVID__1172__row_show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">show</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">何时设置将显示弹出窗口</td>
</tr>
<tr role="row" data-pk="noninteractive" class="" id="__BVID__1172__row_noninteractive">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">noninteractive</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__1172__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="id" class="" id="__BVID__1172__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="content" class="" id="__BVID__1172__row_content">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">content</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要放置在弹出窗口主体中的文本</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-popover-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/popover#comp-ref-b-popover-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-popover-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1200">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="title" class="" id="__BVID__1200__row_title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title</code></td>
<td aria-colindex="2" role="cell" class="">标题的可选位置(HTML/components supported)</td>
</tr>
<tr role="row" data-pk="default" class="" id="__BVID__1200__row_default">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">default</code></td>
<td aria-colindex="2" role="cell" class="">内容槽 (HTML/components supported)</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-popover-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/popover#comp-ref-b-popover-events" class="anchorjs-link" aria-labelledby="comp-ref-b-popover-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1210">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="show" class="" id="__BVID__1210__row_show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">show</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当弹出窗口即将显示时发出。可取消。调用bvEvent.preventDefault（）取消显示。</td>
</tr>
<tr role="row" data-pk="shown" class="" id="__BVID__1210__row_shown">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">shown</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">显示popover时发出</td>
</tr>
<tr role="row" data-pk="hide" class="" id="__BVID__1210__row_hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hide</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当popover即将隐藏时发出。可取消。调用bvEvent.preventDefault（）取消隐藏。</td>
</tr>
<tr role="row" data-pk="hidden" class="" id="__BVID__1210__row_hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hidden</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">隐藏popover时发出</td>
</tr>
<tr role="row" data-pk="enabled" class="" id="__BVID__1210__row_enabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">enabled</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">启用popover时发出</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__1210__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当popover被禁用时发出</td>
</tr>
<tr role="row" data-pk="bv::popover::show" class="" id="__BVID__1210__row_bv::popover::show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::popover::show</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">将要显示popover时在$root上发出。可取消。调用bvEvent.preventDefault（）取消显示。</td>
</tr>
<tr role="row" data-pk="bv::popover::shown" class="" id="__BVID__1210__row_bv::popover::shown">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::popover::shown</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">显示popover时在$root上发出</td>
</tr>
<tr role="row" data-pk="bv::popover::hide" class="" id="__BVID__1210__row_bv::popover::hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::popover::hide</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当popover即将隐藏时在$root上发出。可取消。调用bvEvent.preventDefault（）取消隐藏。</td>
</tr>
<tr role="row" data-pk="bv::popover::hidden" class="" id="__BVID__1210__row_bv::popover::hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::popover::hidden</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">隐藏popover时在$root上发出</td>
</tr>
<tr role="row" data-pk="bv::popover::enabled" class="" id="__BVID__1210__row_bv::popover::enabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::popover::enabled</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">启用popover时在$root上发出</td>
</tr>
<tr role="row" data-pk="bv::popover::disabled" class="" id="__BVID__1210__row_bv::popover::disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::popover::disabled</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvent</code> - <span data-v-866a22e8="">bvEvent object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当popover被禁用时在$root上发出</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-popover-rootEventListeners" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate">$root</code>事件监听器<a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/popover#comp-ref-b-popover-rootEventListeners" class="anchorjs-link" aria-labelledby="comp-ref-b-popover-rootEventListeners" target="_self"></a></span></h4>
<p data-v-866a22e8="">
  您可以通过在<samp data-v-866a22e8="" translate="translate" class="notranslate">$root</samp>上发出以下事件来控制<code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-popover&gt;</code>：
</p>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1231">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="bv::hide::popover" class="" id="__BVID__1231__row_bv::hide::popover">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::hide::popover</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> <span data-v-866a22e8=""> - (optional), popover id to hide</span></p></td>
<td aria-colindex="3" role="cell" class="">在$root上发出此事件时关闭（隐藏）所有或特定的打开弹出窗口</td>
</tr>
<tr role="row" data-pk="bv::show::popover" class="" id="__BVID__1231__row_bv::show::popover">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::show::popover</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> <span data-v-866a22e8=""> - (optional), popover id to show</span></p></td>
<td aria-colindex="3" role="cell" class="">在$root上发出此事件时打开（显示）所有或特定的弹出窗口</td>
</tr>
<tr role="row" data-pk="bv::disable::popover" class="" id="__BVID__1231__row_bv::disable::popover">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::disable::popover</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> <span data-v-866a22e8=""> - (optional), popover id to disable</span></p></td>
<td aria-colindex="3" role="cell" class="">在$root上发出此事件时禁用所有或特定的popover</td>
</tr>
<tr role="row" data-pk="bv::enable::popover" class="" id="__BVID__1231__row_bv::enable::popover">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::enable::popover</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> <span data-v-866a22e8=""> - (optional), popover id to enable</span></p></td>
<td aria-colindex="3" role="cell" class="">在$root上发出此事件时启用所有或特定的popover</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/popover#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1245">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-popover&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BPopover</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BPopover } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-popover'</span>, BPopover)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/popover#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1255">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">PopoverPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p>此插件还自动包含以下插件：</p>
<ul>
<li><code translate="translate" class="notranslate">VBPopoverPlugin</code></li>
</ul>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { PopoverPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(PopoverPlugin)</pre></figure>






</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
